<template>
  <div class="profile">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card>
          <template #header>
            <span>个人信息</span>
          </template>
          <div class="profile-info">
            <div class="avatar">
              <el-avatar :size="100" :icon="UserFilled" />
            </div>
            <div class="user-info">
              <h3>{{ currentUser?.realName || currentUser?.username }}</h3>
              <p>{{ currentUser?.email }}</p>
              <el-tag :type="getStatusType(currentUser?.status)">
                {{ getStatusText(currentUser?.status) }}
              </el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="16">
        <el-card>
          <template #header>
            <span>编辑资料</span>
          </template>
          <el-form
            ref="profileFormRef"
            :model="profileForm"
            :rules="profileRules"
            label-width="100px"
          >
            <el-form-item label="用户名">
              <el-input v-model="profileForm.username" disabled />
            </el-form-item>
            
            <el-form-item label="邮箱" prop="email">
              <el-input
                v-model="profileForm.email"
                placeholder="请输入邮箱"
                clearable
              />
            </el-form-item>
            
            <el-form-item label="真实姓名" prop="realName">
              <el-input
                v-model="profileForm.realName"
                placeholder="请输入真实姓名"
                clearable
              />
            </el-form-item>
            
            <el-form-item label="电话" prop="phone">
              <el-input
                v-model="profileForm.phone"
                placeholder="请输入电话"
                clearable
              />
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" :loading="updateLoading" @click="handleUpdate">
                更新资料
              </el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card>
          <template #header>
            <span>修改密码</span>
          </template>
          <el-form
            ref="passwordFormRef"
            :model="passwordForm"
            :rules="passwordRules"
            label-width="100px"
            style="max-width: 500px;"
          >
            <el-form-item label="当前密码" prop="currentPassword">
              <el-input
                v-model="passwordForm.currentPassword"
                type="password"
                placeholder="请输入当前密码"
                show-password
                clearable
              />
            </el-form-item>
            
            <el-form-item label="新密码" prop="newPassword">
              <el-input
                v-model="passwordForm.newPassword"
                type="password"
                placeholder="请输入新密码"
                show-password
                clearable
              />
            </el-form-item>
            
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input
                v-model="passwordForm.confirmPassword"
                type="password"
                placeholder="请确认新密码"
                show-password
                clearable
              />
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" :loading="passwordLoading" @click="handlePasswordChange">
                修改密码
              </el-button>
              <el-button @click="resetPasswordForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import { UserFilled } from '@element-plus/icons-vue'

export default {
  name: 'Profile',
  components: {
    UserFilled
  },
  setup() {
    const store = useStore()
    const currentUser = computed(() => store.getters.currentUser)
    
    const updateLoading = ref(false)
    const passwordLoading = ref(false)
    
    const profileFormRef = ref()
    const passwordFormRef = ref()
    
    const profileForm = reactive({
      username: '',
      email: '',
      realName: '',
      phone: ''
    })
    
    const passwordForm = reactive({
      currentPassword: '',
      newPassword: '',
      confirmPassword: ''
    })
    
    const profileRules = {
      email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
      ]
    }
    
    const passwordRules = {
      currentPassword: [
        { required: true, message: '请输入当前密码', trigger: 'blur' }
      ],
      newPassword: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        { min: 6, message: '密码长度至少6位', trigger: 'blur' }
      ],
      confirmPassword: [
        { required: true, message: '请确认新密码', trigger: 'blur' },
        {
          validator: (rule, value, callback) => {
            if (value !== passwordForm.newPassword) {
              callback(new Error('两次输入的密码不一致'))
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }
      ]
    }
    
    const handleUpdate = async () => {
      if (!profileFormRef.value) return
      
      await profileFormRef.value.validate(async (valid) => {
        if (valid) {
          updateLoading.value = true
          try {
            // 这里应该调用更新用户信息的API
            // await userApi.updateUser(currentUser.value.id, profileForm)
            ElMessage.success('资料更新成功')
          } catch (error) {
            ElMessage.error('资料更新失败')
          } finally {
            updateLoading.value = false
          }
        }
      })
    }
    
    const handlePasswordChange = async () => {
      if (!passwordFormRef.value) return
      
      await passwordFormRef.value.validate(async (valid) => {
        if (valid) {
          passwordLoading.value = true
          try {
            // 这里应该调用修改密码的API
            // await userApi.changePassword(passwordForm)
            ElMessage.success('密码修改成功')
            resetPasswordForm()
          } catch (error) {
            ElMessage.error('密码修改失败')
          } finally {
            passwordLoading.value = false
          }
        }
      })
    }
    
    const resetForm = () => {
      if (currentUser.value) {
        Object.assign(profileForm, {
          username: currentUser.value.username || '',
          email: currentUser.value.email || '',
          realName: currentUser.value.realName || '',
          phone: currentUser.value.phone || ''
        })
      }
    }
    
    const resetPasswordForm = () => {
      if (passwordFormRef.value) {
        passwordFormRef.value.resetFields()
      }
      Object.assign(passwordForm, {
        currentPassword: '',
        newPassword: '',
        confirmPassword: ''
      })
    }
    
    const getStatusType = (status) => {
      switch (status) {
        case 'ACTIVE': return 'success'
        case 'INACTIVE': return 'info'
        case 'LOCKED': return 'danger'
        default: return 'info'
      }
    }
    
    const getStatusText = (status) => {
      switch (status) {
        case 'ACTIVE': return '活跃'
        case 'INACTIVE': return '非活跃'
        case 'LOCKED': return '锁定'
        default: return '未知'
      }
    }
    
    onMounted(() => {
      resetForm()
    })
    
    return {
      currentUser,
      updateLoading,
      passwordLoading,
      profileFormRef,
      passwordFormRef,
      profileForm,
      passwordForm,
      profileRules,
      passwordRules,
      handleUpdate,
      handlePasswordChange,
      resetForm,
      resetPasswordForm,
      getStatusType,
      getStatusText
    }
  }
}
</script>

<style scoped>
.profile {
  padding: 20px;
}

.profile-info {
  text-align: center;
}

.avatar {
  margin-bottom: 20px;
}

.user-info h3 {
  margin: 10px 0;
  color: #333;
}

.user-info p {
  margin: 5px 0 15px 0;
  color: #666;
}
</style>


